<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        
        <title>jquery-image-viewer demo</title>
        
        <!-- Javascript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.image_viewer.js"></script>
        
        <style type="text/css" media="screen">
            
            /* Demo styles */
            body {
                font: 16px Arial,sans-serif;
                margin: 0;
                text-align: center;
            }
            #container {
                margin: 0 auto;
                text-align: left;
                width: 600px;
            }
            /* Styling for simple example. */
            #simple-slideshow {
                position: relative;
                width: 300px;
                height: 300px;
            }
            #simple-slideshow-images img {
                border: 0 none;
            }
            #simple-slideshow-next-link,
            #simple-slideshow-prev-link {
                position: absolute; 
                top: 50%;
                float: left;
                padding: 12px 10px;
                background: rgba(255, 255, 255, 0.65);
                color: #000;
                text-decoration: none;
            }
            #simple-slideshow-next-link:hover,
            #simple-slideshow-prev-link:hover {
                background: rgba(0, 0, 0, 0.65);
                color: #fff;
                text-decoration: none;
            }
            #simple-slideshow-prev-link {
                left: 0;
            }
            #simple-slideshow-next-link {
                right: 0;
            }
            
            /* Styling for  */
            .slideshow-container {
                padding: 10px;
                background: #ececec;
                margin: 15px;
                border: 1px solid #ccc;
            }
            .slideshow-container .links {
                top: 150px;
                padding: 10px;                
            }
            .slideshow-container .links a {
                font-weight: bold;
                text-decoration: none;
                color: #333;
                text-align: center;
            }
            .slideshow-container .thumbnails a img {
                border: 0 none;
                background: #fff;
                padding: 4px;
                margin: 2px;
            }
            .slideshow-container .links a:hover {
                text-decoration: none;
                color: #fff;
            }
            .slideshow-prev-link {
                left: 5px;
            }
            .slideshow-next-link {
                right: 5px;
            }
        
        </style>
    
        <script type="text/javascript">
        
            $(function() {
                
                // A simple example.
                $('#simple-slideshow').image_viewer({
                    slideshow_images_selector: '#simple-slideshow #simple-slideshow-images',
                    previous_selector: '#simple-slideshow #simple-slideshow-prev-link',
                    next_selector: '#simple-slideshow #simple-slideshow-next-link'
                });
                
                // An example with multiple thumbnail boxes.An example using multipl
                $('#slideshow').image_viewer({
                    delay: 3000,
                    thumbnails_selector: '#slideshow .thumbnails'
                });

                // A more complex example that changes the first slide
                $('#slideshow-2').image_viewer({
                    start: 1,
                    delay: 2000,
                    slideshow_images_selector: '#slideshow-images2',
                    thumbnails_selector: '#slideshow-thumbnails2',
                    previous_selector: '#slideshow-previous2',
                    next_selector: '#slideshow-next2'
                });

                
            }); 
        
        </script>
    
    </head>
    <body>
        <div id="container">
            
            <h1>jquery-image-viewer demo</h1>
            
            <h3>A simple example</h3>
            
            <div id="simple-slideshow">
                <a href="#" title="View the previous image" id="simple-slideshow-prev-link">Prev</a>
                <a href="#" title="View the next image" id="simple-slideshow-next-link">Next</a>
                <div id="simple-slideshow-images">
                    <a href="#" title="View this image"><img src="img/demo-images/pancakes-300x300.jpg" alt="" /></a>
                    <a href="#" title="View this image"><img src="img/demo-images/lunch-300x300.jpg" alt="" /></a>
                    <a href="#" title="View this image"><img src="img/demo-images/dinner-300x300.jpg" alt="" /></a>
                </div>
            </div>
            
            <hr />
            
            <h3>An example with multiple thumbnail boxes.</h3>
            
            <div class="slideshow-container" id="slideshow">
    			<div class="thumbnails">
                    <a href="#" title="View this image"><img src="img/demo-images/pancakes-100x100.jpg" alt="" /></a>
                    <a href="#" title="View this image"><img src="img/demo-images/lunch-100x100.jpg" alt="" /></a>
                    <a href="#" title="View this image"><img src="img/demo-images/dinner-100x100.jpg" alt="" /></a>
                </div>
                <div class="links">
                    <a href="#" title="View previous image" id="slideshow-previous">Prev</a>
                    <a href="#" title="View next image" id="slideshow-next">Next</a>
                </div>
                <div class="slides" id="slideshow-slides">
                    <div>
                        <h4>Pancakes</h4>
                        <p><a href="#" title="View this image"><img src="img/demo-images/pancakes-300x300.jpg" alt="" /></a></p>
                        <p>A yummy syrupy stack!</p>
                    </div>
                    <div>
                        <h4>Lunch</h4>
                        <p><a href="#" title="View this image"><img src="img/demo-images/lunch-300x300.jpg" alt="" /></a></p>
                        <p>Sandwiches</p>
                    </div>
                    <div>
                        <h4>Dinner</h4>
                        <p><a href="#" title="View this image"><img src="img/demo-images/dinner-300x300.jpg" alt="" /></a></p>
                        <p>A five course meal</p>
                    </div>
                </div>
                <div class="thumbnails">
                    <img src="img/demo-images/pancakes-100x100.jpg" alt="" />
                    <img src="img/demo-images/lunch-100x100.jpg" alt="" />
                    <img src="img/demo-images/dinner-100x100.jpg" alt="" />
                </div>
            </div>
            
            <hr />
            
            <h3>A more complex example that changes the first slide.</h3>
            
            <div class="slideshow-container" id="slideshow2">
                <div class="links">
                    <a href="#" title="View previous image" id="slideshow-previous2">Prev</a>
                    <a href="#" title="View next image" id="slideshow-next2">Next</a>
                </div>
                <div class="slides" id="slideshow-images2">
                    <img src="img/demo-images/pancakes-300x300.jpg" alt="" />
                    <img src="img/demo-images/dinner-300x300.jpg" alt="" />
                    <img src="img/demo-images/lunch-300x300.jpg" alt="" />
                </div>
                <div class="thumbnails" id="slideshow-thumbnails2">
                    <a href="#" title="View this image"><img src="img/demo-images/pancakes-100x100.jpg" alt="" /></a>
                    <a href="#" title="View this image"><img src="img/demo-images/dinner-100x100.jpg" alt="" /></a>
                    <a href="#" title="View this image"><img src="img/demo-images/lunch-100x100.jpg" alt="" /></a>
                </div>
            </div>
            
        </div>
    </body>
</html>